<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>${nm.title}</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
    <%@include file="../../public/webim.jsp" %>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=90kvQxlyt5Pzav1hlp0PUUvCpwl49oGS"></script>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/message.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/copywechat.css"/>
</head>
<body>
<div id="wrapper">
    <div class="boxmain whiteBox lrbox">
        <div class="lrboxleft borderR" style="width:20%">
            <div style=" overflow: auto;height: 100%">
                <div class="box">
                    <div class="box-tit">
                        <span style="color: #00a0e9">测试专用号</span>
                    </div>
                    <div class="box-con">
                        <p>
                            登录时间：<span style="color: red">15:37</span>
                        </p>
                        <p style="font-size: 12px">
                            D3044 2666 CRH380A
                        </p>
                        <div class="mask" onclick="showMsg()"><span>呼叫</span></div>
                    </div>
                    <div class="box-fj">
                    </div>
                </div>
                <div class="box">
                    <div class="box-tit">
                        <span style="color: #00a0e9">测试专用号001</span>
                    </div>
                    <div class="box-con">
                        <p>
                            登录时间：<span style="color: red">17:37</span>
                        </p>
                        <p style="font-size: 12px">
                            D3044 2666 CRH380A
                        </p>
                        <div class="mask" onclick="showMsg()"><span>呼叫</span></div>
                    </div>
                    <div class="box-fj">
                    </div>
                </div>
            </div>
        </div>
        <div class="lrboxmain borderL" style="margin-left:20%">
            <div style="height: 100%;overflow: auto">
                <blockquote class="layui-elem-quote">
                    <p>交路：武昌-上海虹桥-汉口</p>
                    <table class="layui-table" lay-skin="line" style="width: 500px">
                        <tbody>
                        <tr>
                            <td>D3044</td>
                            <td>武昌-09:24</td>
                            <td>上海虹桥-15:59</td>
                        </tr>
                        <tr>
                            <td>D3042</td>
                            <td>上海虹桥-16:47</td>
                            <td>汉口-22:41</td>
                        </tr>
                        </tbody>
                    </table>
                    <button class="layui-btn layui-btn-small" id="rtCall">视频呼叫</button>
                    <button class="layui-btn layui-btn-small" id="rtAudioCall">音频呼叫</button>
                    <button class="layui-btn layui-btn-small" id="rtAcceptCall">接受</button>
                    <button class="layui-btn layui-btn-small" id="rtEndCall">挂断</button>
                </blockquote>
                <div style="height:60%">
                    <div class="fl" style="width: 48%">
                        <video id="video" style="border: 1px solid red;width:100%;height: 600px;" autoplay>

                        </video>
                    </div>
                    <div class="fl" style="width: 48%">
                        <div id="allmap" style="width:100%;height:300px"></div>
                        <video id="localVideo" style="border: 1px solid blue;width:100%; height: 300px;" autoplay>

                        </video>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <!-- whitebox -->
</div>

<script>
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(108.869, 34.355), 17);   // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("西安");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    /**
     * Created by clock on 16-11-25.
     */
    var conn = {};
    conn = new WebIM.connection({
        isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
        https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
        url: WebIM.config.xmppURL,
        isAutoLogin: true,
        heartBeatWait: WebIM.config.heartBeatWait,
        autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
        autoReconnectInterval: WebIM.config.autoReconnectInterval
    });

    // listern，添加回调函数
    conn.listen({
        onOpened: function (message) {          //连接成功回调，连接成功后才可以发送消息
            //如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
            // 手动上线指的是调用conn.setPresence(); 在本例中，conn初始化时已将isAutoLogin设置为true
            // 所以无需调用conn.setPresence();
            console.log("%c [opened] 连接已成功建立", "color: green")
        },                //本机网络掉线
        onError: function (message) {
            console.log('Error');
            console.log(message);
            if (message && message.type == 1) {
                console.warn('连接建立失败！请确认您的登录账号是否和appKey匹配。')
            }
        },           //失败回调
        onBlacklistUpdate: function (list) {
            // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
            console.log(list);
        }     // 黑名单变动
    });
    // 初始化WebRTC Call
    var rtcCall = null
    if (WebIM.WebRTC) {
        rtcCall = new WebIM.WebRTC.Call({
            connection: conn,

            mediaStreamConstaints: {
                audio: true,
                video: true
            },

            listener: {
                onAcceptCall: function (from, options) {
                    console.log('onAcceptCall::', 'from: ', from, 'options: ', options);
                },
                onGotRemoteStream: function (stream, streamType) {
                    console.log('onGotRemoteStream::', 'stream: ', stream, 'streamType: ', streamType);
                    var video = document.getElementById('video');
                    video.srcObject = stream;
                },
                onGotLocalStream: function (stream, streamType) {
                    console.log('onGotLocalStream::', 'stream:', stream, 'streamType: ', streamType);
                    var video = document.getElementById('localVideo');
                    video.srcObject = stream;
                },
                onRinging: function (caller) {
                    console.log('onRinging::', 'caller:', caller);
                },
                onTermCall: function (reason) {
                    console.log('onTermCall::');
                    console.log('reason:', reason);
                },
                onIceConnectionStateChange: function (iceState) {
                    console.log('onIceConnectionStateChange::', 'iceState:', iceState);
                },
                onError: function (e) {
                    console.log(e);
                }
            }
        });
    } else {
        console.warn('不能进行视频通话！您的浏览器不支持webrtc或者协议不是https。')
    }
</script>
<script type="text/javascript">
    /*
     * WebRTC
     */
    // 视频呼叫对方
    var call = function () {
        rtcCall.caller = '002';
        rtcCall.makeVideoCall('000');
    };
    // 关掉/拒绝视频
    var endCall = function () {
        rtcCall.endCall();
    }
    // 接受对方呼叫
    var acceptCall = function () {
        rtcCall.acceptCall();
    }

    // 语音呼叫对方
    var audioCall = function () {
        console.log('Audio Call');
        rtcCall.caller = '002';
        rtcCall.makeVoiceCall('000');
    };

    //
    var logout = function () {
        conn.close('logout');
        conn.errorType = WebIM.statusCode.WEBIM_CONNCTION_CLIENT_LOGOUT;


    }
    /**
     * Created by clock on 16-11-30.
     */
    window.onload = function () {
        document.getElementById('rtCall').onclick = call;
        document.getElementById('rtEndCall').onclick = endCall;
        document.getElementById('rtAcceptCall').onclick = acceptCall;
        document.getElementById('rtAudioCall').onclick = audioCall;


        var options = {
            apiUrl: WebIM.config.apiURL,
            user: "002",
            pwd: "abc002",
            appKey: WebIM.config.appkey
        };
        conn.open(options);
    };
</script>
</body>
</html>